<template>
<div class="content">
<div class="box">
  <div class="popWindow" v-if="pop!=0">
    <em class="close" @click="pop=0"></em>
    <div class="win" v-if="pop==1">
      <p>
        {{eggData.split('(')[0]}}<br/>
        {{eggData.split('(')[1]}}
      </p>
    </div>
    <div class="err" v-if="pop==2"></div>
    <div class="share" v-if="pop==3"></div>
  </div>
  <router-link class="ticketBtn" tag="button" :to="{name:'winList'}">抢券记录</router-link>
  <div class="title">- {{dataShowData.coup_name}} -</div>
  <div class="rule">活动规则></div>
  <div class="winUserList" ref="winUserList">
    <ul :style="{transform:'translateY(-'+(6.1*winUserListiNow)+'vw)'}">
      <li v-for="item in dataShowData.newlist">恭喜{{item.nickname}}抢到{{item.coup_name}}券</li>
    </ul>
  </div>
  <div class="eggList" :class="{'out':dataShowData.num==0}">
    <ul>
      <li v-for="(item,idx) in 3" @click="eggClickFn(idx)" :class="{'move':eggClickIdx===idx}"></li>
    </ul>
  </div>
  <!--<div class="btnBox">
    <div class="cl"></div>
    <div class="cc"><router-link class="btnStyle btn" tag="button" :to="{name:'winList'}">抢券记录</router-link></div>
    <div class="cr">
      还有{{dataShowData.num}}次抢券机会
      <p>(分享给朋友可获得额外机会)</p>
    </div>
  </div>-->
  <div class="moreList">
    <ul>
      <li v-for="i in 6">
        <div class="cl">罗马大帝KTV</div>
        <div class="cr">10次<br/>机会</div>
      </li>
    </ul>
  </div>
</div>
</div>
</template>

<script>
export default {
  data:()=>({
    winUserListiNow:0,
    winUserListNum:10,
    pop:0,
    dataShowData:'',
    eggData:'',
    eggClickIdx:''
  }),
  mounted(){
    this.dataShowFn();
  },
  methods:{
    eggClickFn(idx){
      if(this.dataShowData.num<=0){
        if(this.dataShowData.isget==1){
          Toast('您已抢到券，请到“抢券记录”进行查看');
          return false;
        }else{
          this.pop=3;
          Toast('好友助力未完成，请耐心等待；如助力完成灰蛋变金蛋');
          return false;
        }
      }
      this.eggClickIdx=idx;
      setTimeout(()=>{
        this.eggClickIdx='';
      },1000);
      this.http(this.api.coupon_do,{
        coupid:this.$route.query.coupid
      }).then(res=>{
        switch(parseInt(res.data.ret,10)){
          case 0:
            this.eggData=res.data.data.name;
            if(this.eggData){
              this.pop=1;
            }else{
              this.pop=2;
            }
            this.dataShowFn();
            break;
          default:
            Toast(res.data.msg);
        }
      })
    },
    winUserListMoveFn(){
      setInterval(()=>{
        if(this.winUserListiNow>=this.winUserListNum-1){
          this.winUserListiNow=0;
        }else{
          this.winUserListiNow++;
        }
      },2000)
    },
    dataShowFn(){
      this.http(this.api.coupon_get,{
        coupid:this.$route.query.coupid,
        url:window.location.href
      }).then(res=>{
        switch(parseInt(res.data.ret,10)){
          case 0:
            this.dataShowData=res.data.data;
            this.winUserListNum=this.dataShowData.newlist.length;
            this.wxSdk.config({
              appId:res.data.data.share.appId,
              timestamp:res.data.data.share.timestamp,
              nonceStr:res.data.data.share.noncestr,
              signature:res.data.data.share.signature,
              jsApiList:[
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
              ]
            });
            let wxConfig={
              title:res.data.data.share.share_title, // 分享标题
              desc:res.data.data.share.share_desc, // 分享描述
              link:res.data.data.share.share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl:res.data.data.share.share_img , // 分享图标
              success:()=>{
                Toast(' 分享成功');
              }
            };
            this.wxSdk.ready(()=>{
              this.wxSdk.onMenuShareTimeline(wxConfig);
              this.wxSdk.onMenuShareAppMessage(wxConfig);
              this.wxSdk.onMenuShareQQ(wxConfig);
              this.wxSdk.onMenuShareWeibo(wxConfig);
            })
            this.$nextTick(()=>{
              this.winUserListMoveFn();
            });
            break;
          case 2000:
            window.location.href="http://yh.qikwl.com";
            break;
          default:
            Toast(res.data.msg);
        }
      });
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
.content{
  color:#FFF;
  display:block!important;
  overflow:auto;
  .popWindow{
    .win{
      background:url('~@img/eggWinBg.png') center top no-repeat;
      background-size:100% 100%;
      width:632px;
      height:802px;
      margin:auto;
      p{
        margin:310px auto 0;
        color:#000;
        font-size:40px;
        width:5em;
        line-height:1.2;
      }
    }
    .err{
      background:url('~@img/eggErrBg.png') center top no-repeat;
      background-size:100% 100%;
      width:500px;
      height:528px;
      margin:auto;
    }
    .share{
      background:url('~@img/share.png') center top no-repeat;
      background-size:100% 100%;
      width:508px;
      height:298px;
      margin:30px 30px auto auto;
    }
  }
  .title{
    position:absolute;
    left:0;
    right:0;
    top:250px;
    font-size:30px;
    font-weight:bold;
  }
  .ticketBtn{
    position:absolute;
    right:30px;
    top:60px;
    background-color:rgba(#000,0.3);
    width:140px;
    height:50px;
    border:2px solid #ead6b8;
    border-radius:10px;
    color:#ead6b8;
    font-size:24px;
    font-weight:bold;
  }
  .box{
    min-height:100%;
    background:url('~@img/discountMainBg.jpg') center top no-repeat;
    background-size:100% auto;
    overflow:hidden;
  }
  .rule{
    margin:244px auto 0;
    font-size:18px;
    color:#FFF;
    opacity:0;
  }
  .winUserList{
    margin:47px auto 0;
    font-size:24px;
    height:46px;
    line-height:46px;
    overflow:hidden;
    ul{
      transition:0.5s;
    }
  }
  .eggList{
    margin:(85px-(50px/2)) 5% 0;
    &.out{
      filter: grayscale(100%);
    }
    ul{
      display:flex;
      flex-wrap:wrap-reverse;
      justify-content:space-around;
      li{
        width:178px*1.2;
        height:234px*1.2;
        background:url('~@img/egg.png') center top no-repeat;
        background-size:100% 100%;
        margin:0 20px 110px;
        animation:eggItem 1s alternate infinite;
        transform-origin:center bottom;
        &.move{
          animation:none;
          position:relative;
          &:before{
            top:-10%;
            right:-10%;
            content:'';
            width:150px;
            height:146px;
            position:absolute;
            background:url('~@img/do.png') center;
            background-size:100% 100%;
            animation:move .5s forwards;
            transform-origin:right bottom;
          }
          @keyframes move{
            0%{
              transform:rotate(45deg);
            }
            100%{
              transform:rotate(-10deg);
            }
          }
        }
      }
      @keyframes eggItem{
        0%{
          transform:rotate(5deg);
        }
        35%{
          transform:rotate(-5deg);
        }
        70%{
          transform:rotate(0deg);
        }
      }
    }
  }
  .btnBox{
    margin:30px 30px 0;
    display:flex;
    .cl,.cr{
      flex:1;
    }
    .cr{
      text-align:right;
      font-size:22px;
      margin:auto 0;
      line-height:1.2;
      p{
        font-size:14px;
      }
    }
    .btn{
      width:200px;
      height:80px;
      border:2px solid #ead6b8;
      border-radius:10px;
      color:#ead6b8;
      font-size:30px;
      font-weight:bold;
    }
  }
  .moreList{
    display:none;
    margin:50px 30px 15px;
    ul{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      li{
        background:url('~@img/discountItem.png') center top no-repeat;
        background-size:100% 100%;
        width:328px;
        height:128px;
        margin-bottom:15px;
        display:flex;
        align-items: center;
        line-height:1.2;
        .cr{
          margin-left:auto;
          font-size:20px;
          width:100px;
        }
        .cl{
          margin-left:30px;
          width:4.5em;
          text-align:left;
        }
      }
    }
  }
}
</style>
